<template>
	<div>
		<div class="flex items-center">
			<p v-for="(item, index) in tabs" :key="index"
			class="mr-20px text-#B5B5B5 cursor-pointer" :class="{'text-#FFFFFF': item.label === selectedTab}" @click="selectedTab = item.label"> 
				{{ item.label }} 
			</p>
		</div>
		<div class="flex items-center">
			<p class="mr-16px">MA</p>
			<p class="mr-16px text-#FDFD6E">MA5:93951.00</p>
			<p class="mr-16px text-#FD5DF1">MA5:93951.00</p>
			<p class="mr-16px text-#6EA7F2">MA5:93951.00</p>
		</div>
		<div>
			<k-line></k-line>
		</div>
	</div>
</template>
<script lang="ts" setup>
import KLine from './KLine.vue';
const tabs = ref([
	{
		label: '分时',
		id: 1,
	},
	{
		label: '5分钟',
		id: 2,
	},
	{
		label: '1小时',
		id: 3,
	},
	{
		label: '日线',
		id: 4,
	},
	{
		label: '月线',
		id: 5,
	}
]);

const selectedTab = ref<string>('1小时')


</script>
